<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>

        <style type="text/css">
            .wrapper { width: 500px;  height: 300px ; margin: 15px auto ; background-color: #dfdfdf ; }

            .first {
                border-top: 50px solid blue ; /* 设置顶边边框的 粗细、样式、颜色 */
                border-bottom: 50px solid blue ;
                border-left: 50px solid red ;
                border-right: 50px solid red ;
            }

            .second {
                border-top-width: 50px ;
                border-top-style: dotted ;
                border-top-color: blue ;

                border-bottom-width: 50px ;
                border-bottom-style: dotted ;
                border-bottom-color: blue ;

                border-left-width: 50px ;
                border-left-style: dotted ;
                border-left-color: red ;

                border-right-width: 50px ;
                border-right-style: dotted ;
                border-right-color: red ;
            }
        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>
        
    </body>
</html>